<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片预加载</title>
	<style>
		.container{
			display: none;
		}
	</style>
</head>
<body>
	<div class="container">
		<img src="img/num_0.png" alt="" />
		<img src="img/num_1.png" alt="" />
		<img src="img/num_2.png" alt="" />
		<img src="img/num_3.png" alt="" />
		<img src="img/num_4.png" alt="" />
		<img src="img/num_5.png" alt="" />
		<img src="img/num_6.png" alt="" />
		<img src="img/num_7.png" alt="" />
	</div>
	<script>
		var image = ['num_0.png',
					 'num_1.png',
					 'num_2.png',
					 'num_3.png',
					 'num_4.png',
					 'num_5.png',
					 'num_6.png',
					 'num_7.png',
					 'num_8.png',
					 'num_9.png'];
					 
		preLoad(image);
		function preLoad(imgs){
			var new_imgs=[];
			var loadedImg = 0;

			if(typeof imgs === 'object'){
				for(var i = 0; i < imgs.length; i++){
					new_imgs[i] = new Image();
					new_imgs[i].src = 'img/' + imgs[i];
					new_imgs[i].onload = function(){
						loadedImg++;
						if(loadedImg == imgs.length){
							document.querySelector('.container').style.display = 'block';
							alert('加载完成');
						}
					};
					
				}
			}
			console.log(imgs.length);
		}
		
		
	</script>
</body>
</html>